import { TableColumnsType } from "ant-design-vue";
import { Component } from "vue";

export interface LowCodeState {
  /**配置JSON */
  configs: WidgetConfigs;
  /**选中配置 */
  selectedConfig: WidgetConfig;
}

/**表单属性 */
export interface FormsProps {
  /**label占宽 */
  labelCol: {
    /**宽度 */
    span: number;
  };
  /**表单控件占宽 */
  wrapperCol: {
    /**宽度 */
    span: number;
  };
}
/**表单控件 */
export interface FormsConfig extends BaseConfig {
  name: "表单";
  code: "form";
  type: "block";
  props: FormsProps;
}

/**表格属性 */
export interface TableProps {
  /**表格列 */
  columns: TableColumnsType;
}
/**表格控件 */
export interface TableConfig extends BaseConfig {
  name: "表格";
  code: "table";
  type: "block";
  props: TableProps;
}

/**搜索属性 */
export interface SearchFormProps {
  /**label占宽 */
  labelCol: number;
  /**表单控件占宽 */
  wrapperCol: number;
  /**列数 */
  columns: number;
}
/**搜索控件 */
export interface SearchFormConfig extends BaseConfig {
  name: "搜索";
  code: "searchForm";
  type: "block";
  props: SearchFormProps;
}

/**输入框属性 */
export interface InputProps {
  /**清除按钮 */
  allowClear: boolean;
}
export interface InputConfig extends BaseConfig {
  name: "输入框";
  code: "input";
  type: "form";
  props: InputProps;
}

/**控件配置 */
export interface BaseConfig {
  /**控件ID */
  id: string;
  /**控件名称 */
  name: string;
  /**控件编码 */
  code: string;
  /**控件图标 */
  icon: string;
  /**控件属性 */
  props?: Record<string, any>;
  /**控件类型 */
  type: "form" | "block";
  /**组件 */
  component: Component | (() => Promise<Component>);
  /**子集 */
  children?: WidgetConfigs;
}
export type FormConfig = InputConfig;
export type BlockConfig = FormsConfig | TableConfig | SearchFormConfig;
export type WidgetConfig = FormConfig | BlockConfig;
export type WidgetConfigs = WidgetConfig[] | [];
